<template>
	<view class="page">
		<!-- 头部导航 -->
		<view class="navgter">
			<view class="navItems">
				<view class="items" @click="$next(`/pages/index/articleDetail?id=4`)">
					<view class="imageBox styleColor1">
						<image src="@/static/index/liucheng.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						操作流程
					</view>
				</view>
				<view class="items" @click="$next(`/pages/functionCore/counter`,true)">
					<view class="imageBox styleColor2">
						<image src="@/static/index/yongjin.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						佣金计算
					</view>
				</view>
				<view class="items" @click="$next(`/pages/index/classRoom`,true)">
					<view class="imageBox styleColor3">
						<image src="@/static/index/shoudian.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						售电学习
					</view>
				</view>
				<!-- <view class="items" @click="goEdu">
					<view class="imageBox styleColor3">
						<image src="@/static/index/shoudian.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						售电培训
					</view>
				</view> -->
				
				<view class="items" @click="$next(`/pages/index/service`)">
					<view class="imageBox styleColor4">
						<image src="@/static/index/baike.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						售电百科
					</view>
				</view>
				
				<view class="items" @click="$next(`/pages/index/lvDianLvzhengLvShou`)">
					<view class="imageBox styleColor6">
						<image src="@/static/index/zs.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						绿证绿电预售
					</view>
				</view>
				
				<view class="items" @click="$next(`/pages/mine/promoted`)">
					<view class="imageBox" style="background-color: #33C9C6;">
						<image src="@/static/Icon/pro.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						我的推荐
					</view>
				</view>
				
				<view class="items" @click="$next(`/pages/mine/promoteQrcode`)">
					<view class="imageBox styleColor6">
						<image src="@/static/Icon/ewm.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						售电推广
					</view>
				</view>
				<button class="items u-reset-button" style="margin-left:0px;" open-type="contact">
					<view class="imageBox styleColor5">
						<image src="@/static/index/kefu.png" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="navTitle">
						客服中心
					</view>
				</button>
			</view>

		</view>
		<view class="tuiJian">
			<view class="tuiJian-title-box">
				<img src="@/static/index/tuijiantitle.png" style="width: 24rpx;height: 30rpx;margin-right: 10rpx;">
				<view class="tuiJian-title">
					人人推荐
				</view>
			</view>
			<view class="tuiJian-content">
				<view class="rowLine" v-for=" (item , index) in rouping" :key="index">
					<view class="tuiJian-content-left">
						<view class="tuiJian-i-b" @click="details(item[0])">
							<view class="ib-txt">
								{{item[0].title||''}}
							</view>
							<view class="ib-i" v-if="item[0].tag">
								<text v-if="item[0].tag == 1" class="xinde">新</text>
								<text v-if="item[0].tag == 2" class="jiande">荐</text>
								<text v-if="item[0].tag == 3" class="hot">热</text>
								<text v-if="item[0].tag == 4" class="bao">爆</text>
							</view>
						</view>
					</view>


					<view class="line">
					</view>

					<view class="tuiJian-content-right">
						<view class="tuiJian-i-b" style="justify-content: space-between;" v-if="index !=3 "
							@click="details(item[1])">
							<view class="ib-txt">
								{{item[1].title||''}}
							</view>
							<view class="ib-i " v-if="item[1].tag">
								<text v-if="item[1].tag == 1" class="xinde">新</text>
								<text v-if="item[1].tag == 2" class="jiande">荐</text>
								<text v-if="item[1].tag == 3" class="hot">热</text>
								<text v-if="item[1].tag == 4" class="bao">爆</text>
							</view>
						</view>
						<view class="tuijian-more" @click="recommendMore()" v-else>
							展开更多>>>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- banner区域 -->
		<view class="banner" v-if="videoSwitch == 1">
			<u-swiper style="width:750rpx;" :list="bannerList" borderRadius="0" :height="240" :width="760"
				@click="banner"></u-swiper>
		</view>

		<!-- 平台优势 -->
		<view class="youShi" v-if="videoSwitch == 1">
			<view class="youShiTitle" style="background-color: #FFFFFF;">
				<image src="@/static/index/youShi.png" style="width: 32rpx; height: 32rpx;"></image>
				<view class="dianLiangTitle">
					平台优势/介绍
				</view>
			</view>
			<view class="youshiTu">
				<view class="youshiTuItems" v-if="videoSwitch == 1" @click="$next(`/pages/index/articleDetail?id=1`)">
					<image :src="$utils.imagePath('/upload/image/haibao1.png')" style="width: 100%; height: 100%;">
					</image>
				</view>
				<view class="youshiTuItems" v-else>
					<image :src="$utils.imagePath('/upload/image/haibao1.png')" style="width: 100%; height: 100%;">
					</image>
				</view>

				<view class="youshiTuItems" v-if="videoSwitch == 1" @click="$next(`/pages/index/articleDetail?id=12`)">
					<image :src="$utils.imagePath('/upload/image/haibao2.png')" style="width: 100%; height: 100%;">
					</image>
				</view>
				<view class="youshiTuItems" v-else>
					<image :src="$utils.imagePath('/upload/image/haibao2.png')" style="width: 100%; height: 100%;">
					</image>
				</view>

			</view>
		</view>

		<!-- 图表区域,实时电量 -->
		<view class="charmit" v-if="videoSwitch == 1">
			<view class="charmitTitle">
				<image src="@/static/index/dianlian.png" style="width: 32rpx; height: 32rpx;"></image>
				<view class="dianLiangTitle">
					实时电量
				</view>
			</view>
			<view class="chamitCentent king-flex king-flex__column">
				<view class="chamitCententInfo">
					近半年月度签约电量（单位：万千瓦时）
				</view>
				<view class="king-flex echarts">

					<tui-charts-column style="width: 100%;" ref="tui_column_2" :tooltip="true" :xAxis="options2.xAxis"
						:dataset="options2.dataset" :max="options2.max" :splitNumber="options2.splitNumber"
						:xAxisVal="options2.xAxisVal" :legend="options2.legend">
					</tui-charts-column>
				</view>
				<!-- <view class="lookMore1">
					查看更多>>>
				</view> -->
			</view>

		</view>
		<!-- 签约信息 -->
		<view class="qianyueBox" v-if="videoSwitch == 1">
			<view class="qianyueTitle">
				<image src="@/static/index/qianyue.png" style="width: 32rpx; height: 32rpx;"></image>
				<view class="dianLiangTitle">
					签约信息
				</view>
			</view>
			<view class="tabox">
				<view class="tabox">
					<view class="li">
						<view class="lit">
							代理
						</view>
						<view class="lit">
							签约电量(万千瓦时)
						</view>
						<view class="lit">
							佣金(元)
						</view>
						<view class="lit">
							时间
						</view>
					</view>
					<view class="lucky-swiper">
						<view class="lucky-position" :style="{ top: move + 'px' }" id="lucky-curin">
							<view class="lucky-for" v-for="(item, index) in commissionList" :key="index">
								<view class="lit" v-if="item.user">{{item.user.realname.substr(0, 1)}}**</view>
								<view class="lit">{{parseFloat(item.totalElectricity).toFixed(2)}}</view>
								<view class="lit">{{item.income}}</view>
								<view class="lit">{{item.statementImport.importDate}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 佣金计算 -->
		<view class="yongJiBox" v-if="videoSwitch == 1">
			<view class="tou">
				<view class="touTitle" style="background-color: #FFFFFF;">
					<image src="@/static/index/jisuan.png" style="width: 32rpx; height: 32rpx;"></image>
					<view class="dianLiangTitle">
						佣金计算
					</view>
				</view>
				<view class="putBox">
					<view class="putBoxTitle">
						签约电量
					</view>
					<u-input style="width: 100%;" :border="false" :disabled="true"
						@click="$next(`/pages/functionCore/counter`,true)" placeholder="请输入电量（单位:万千瓦时）" />
				</view>
				<view class="putBox">
					<view class="putBoxTitle">
						签约电价
					</view>
					<u-input style="width: 100%;" :disabled="true" @click="$next(`/pages/functionCore/counter`,true)"
						:border="false" placeholder="请输入电价（单位:元/千瓦时）" />
				</view>
			</view>
			<view class="footer">
				<view class="wenGuantishi">
					温馨提示 <text class="__bdi" style="padding-left: 8rpx;">*</text>
				</view>
				<view class="fuJia">
					<text class="__bdi" style="padding-right: 8rpx;">*</text>此计算不含个税部分，个税根据结算时的国家相关政策执行。
				</view>
				<view class="yuGu" @click="$next(`/pages/functionCore/counter`,true)">
					预估收益（元）
				</view>
				<view class="shouYiJiE">
					1545.00
				</view>
			</view>
		</view>

		<!-- 学习售电 -->
		<view class="xueXi" v-if="videoSwitch == 1">
			<view class="charmitTitle">
				<image src="@/static/index/stuats.png" style="width: 32rpx; height: 32rpx;"></image>
				<view class="dianLiangTitle">
					学习售电
				</view>
			</view>
			<view class="tuBox">
				<view class="shouDianItems" @click="$next(`/pages/index/articleDetail?id=5`)">
					<view class="shouDianItemsLift">
						<image src="@/static/index/A01.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="shouDianItemsLiftTxt">
							电改历程
						</view>
					</view>
					<view class="shouDianItemsRight">
						<image src="@/static/index/B01.png" style="width: 41rpx;height: 28rpx;"></image>
					</view>
				</view>

				<view class="shouDianItems" @click="$next(`/pages/index/articleDetail?id=6`)">
					<view class="shouDianItemsLift">
						<image src="@/static/index/A02.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="shouDianItemsLiftTxt">
							电力政策
						</view>
					</view>
					<view class="shouDianItemsRight">
						<image src="@/static/index/B02.png" style="width: 41rpx;height: 28rpx;"></image>
					</view>
				</view>

				<view class="shouDianItems" @click="$next(`/pages/index/articleDetail?id=9`)">
					<view class="shouDianItemsLift">
						<image src="@/static/index/A03.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="shouDianItemsLiftTxt">
							佣金解读
						</view>
					</view>
					<view class="shouDianItemsRight">
						<image src="@/static/index/B03.png" style="width: 41rpx;height: 28rpx;"></image>
					</view>
				</view>

				<view class="shouDianItems" @click="$next(`/pages/index/articleDetail?id=7`)">
					<view class="shouDianItemsLift">
						<image src="@/static/index/A04.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="shouDianItemsLiftTxt">
							交易规则
						</view>
					</view>
					<view class="shouDianItemsRight">
						<image src="@/static/index/B04.png" style="width: 41rpx;height: 28rpx;"></image>
					</view>
				</view>

				<view class="shouDianItems" @click="$next(`/pages/index/articleDetail?id=10`)">
					<view class="shouDianItemsLift">
						<image src="@/static/index/A05.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="shouDianItemsLiftTxt">
							寻找客户
						</view>
					</view>
					<view class="shouDianItemsRight">
						<image src="@/static/index/B05.png" style="width: 41rpx;height: 28rpx;"></image>
					</view>
				</view>

				<view class="shouDianItems" @click="$next(`/pages/index/articleDetail?id=8`)">
					<view class="shouDianItemsLift">
						<image src="@/static/index/A06.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="shouDianItemsLiftTxt">
							谈判技巧
						</view>
					</view>
					<view class="shouDianItemsRight">
						<image src="@/static/index/B08.png" style="width: 41rpx;height: 28rpx;"></image>
					</view>
				</view>

				<view class="shouDianItems" @click="$next(`/pages/index/articleDetail?id=11`)">
					<view class="shouDianItemsLift">
						<image src="@/static/index/A07.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="shouDianItemsLiftTxt">
							签约协助
						</view>
					</view>
					<view class="shouDianItemsRight">
						<image src="@/static/index/B07.png" style="width: 41rpx;height: 28rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 案例学习 -->
		<view class="anLIXueXi">
			<view class="qianyueTitle" style="background-color: #FFFFFF;">
				<image src="@/static/index/anli.png" style="width: 32rpx; height: 32rpx;"></image>
				<view class="dianLiangTitle">
					案例学习
				</view>
			</view>
			<view class="anlinav" style="background-color: #FFFFFF;">
				<view @click="changeBillType(0)" :class="{active:billType == 0}" class="anlinavItems">
					线索
				</view>
				<view @click="changeBillType(1)" :class="{active:billType == 1}" class="anlinavItems">
					资源
				</view>
				<view @click="changeBillType(2)" :class="{active:billType == 2}" class="anlinavItems">
					协助
				</view>
				<view @click="changeBillType(3)" :class="{active:billType == 3}" class="anlinavItems">
					直签
				</view>
			</view>

		</view>
		<view class="anLIXueXi" style="padding-bottom:50rpx;">
			<!-- 企业信息 -->

			<view class="qiyeXinXi" v-for="(item,index) in caseList" :key="index"
				@click="$next(`/pages/index/caseDetail?id=${item.id}`)">
				<view class="xinxiTitle">
					<view class="name">
						{{item.cityName}}&nbsp;&nbsp;&nbsp; {{item.name}}
					</view>
					<view class="xinXiTitleReght">
						<!-- <view class="money">
							收益&nbsp;&nbsp;&nbsp;{{item.income}}元
						</view> -->
						<u-icon name="arrow-right" color="#BBBBBB" size="28" style="margin: 0 0 0 16rpx;"></u-icon>
					</view>
				</view>
				<view class="changName">
					{{item.title}}
				</view>
				<view class="jieShao u-line-2">
					{{$utils.trimHtml(item.content)}}
				</view>
			</view>
		</view>

		<login-modal ref="loginModal"></login-modal>
	</view>
</template>

<script>
	import tuiChartsColumn from '@/components/tui-charts-column/tui-charts-column.vue'

	import loginModal from '@/components/loginModal/loginModal.vue'
	import selectRegion from '@/mixin/selectRegion'
	export default {
		mixins: [selectRegion], // 使用混入s
		data() {
			return {
				
				move: 0,
				videoSwitch: 0,
				bannerList: [], //轮播图
				billType: 0,
				showArea: false,
				showType: false,
				caseList: [],
				commissionList: [],
				rouping: [],
				options2: {
					legend: {
						show: true
					},
					xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
					dataset: [{
						name: '月签约电量',
						color: '#2E6ADF',
						source: [],
						val: [],
					}],
					max: 600000,
					splitNumber: 120000,
					xAxisVal: {
						show: true,
						height: 60,
						color: '#EB0909',
						formatter: function(val) {
							return val
						}
					}
				},
			}
		},
		components: {
			tuiChartsColumn,
			loginModal
		},


		onLoad(options) {
			this.getCaseRes()
			let pid = decodeURIComponent(options.scene) == 'undefined' ? 0 : decodeURIComponent(options.scene)
			uni.setStorageSync("pid",pid)
		},
		created() {
			// 控制表格数据自动上下滚动
			let wirel = setInterval(() => {
				this.move--
				if (this.move <= -60) {
					this.move = 0
				}
			}, 50)
		},
		onShow() {
			this.getBanner()
			this.powerCount()
			this.getCommissionRes()
			this.getPersonsRecommend()
			this.getVideoSwitch()

		},
		methods: {
			getVideoSwitch() {
				this.$axios.request(this.$api.getParamsConfig, "GET", {
					config: "VIDEO_SWITCH"
				}).then((val) => {
					this.videoSwitch = val.data.paramValue
				})
			},
			// 给推荐分组,最多显示四行
			recommendGrouping(da) {
				let result = []
				let enth = da.length > 8 ? da.slice(0, 7) : da
				for (var i = 0; i < enth.length; i += 2) {
					result.push(enth.slice(i, i + 2));
				}
				this.rouping = result
			},
	
			// 获取人人推荐列表数据
			getPersonsRecommend() {
				this.$axios.request(this.$api.personsRecommend, "GET", {}).then(res => {
					let data = res.data.map(items => {
						return {
							id: items.id,
							title: items.title,
							tag: items.tag
						}
					})
					this.recommendGrouping(data)
				})
			},
			getCaseRes() {
				this.$axios.request(this.$api.getCaseRes, "GET", {
					type: this.billType,
					page: 1,
					limit: 1,
					orderField: 'id',
					order: 'desc'
				}).then((val) => {
					this.caseList = val.data.list
				})
			},

			getCommissionRes() {
				this.$axios.request(this.$api.getCommissionRes, "GET", {
					page: 1,
					limit: 20,
					orderField: 'id',
					type: 1,
					order: 'desc'
				}).then((val) => {
					this.commissionList = val.data.list
				})
			},
			powerCount() {
				this.$axios.request(this.$api.powerCount, "GET").then((val) => {
					let month = []
					let monthData = []
					val.data.forEach(items => {
						month.push(items.month + '月')
						monthData.push(items.elNum)
					})
					this.options2.xAxis = month
					this.options2.dataset[0].source = monthData
					this.options2.dataset[0].val = monthData
					setTimeout(() => {
						this.$refs.tui_column_2.draw(this.options2.dataset, this.options2.xAxisVal
							.formatter)
					}, 500)


				})
			},
			goEdu() {
				var url = `https://peixun.zygyx.com/wap/login/login.html?account=${this.$store.state.userinfo.mobile}`
				this.$next(
					`/pages/index/webView?url=${this.$utils.encryption(url)}&random=${Math.round(Math.random() * 100)}`,
					true)
			},
			getBanner() {
				this.$axios.request(this.$api.getBannerRes, "GET").then((val) => {
					val.data.forEach((item) => {
						item.image = this.$axios.interfaceUrl() + item.image
					})
					this.bannerList = val.data
				})
			},
			changeBillType(type) {
				this.billType = type
				this.getCaseRes()
			},
			// 跳转到banner页面
			banner(index) {
				this.$next(this.bannerList[index].path)
			},
			recommendMore() {
				uni.navigateTo({
					url: '/pages/index/newsList'
				})
				// console.log('加载更多推荐')
			},
			details(item) {
				uni.navigateTo({
					url: `/pages/index/newsDetail?id=${item.id}`
				})
			}
		}
	}
</script>

<style scoped>
	@import "../../style/indexNewPage.css";

	view {
		box-sizing: border-box;
	}

	.lucky {
		width: 600rpx;
		height: 185px;
		margin: 50rpx auto;
		padding: 0 3%;
		color: #fff;
		background-image: linear-gradient(45deg, #9000ff, #5e00ff);
	}

	.lucky-top {
		width: 100%;
		float: left;
		overflow: hidden;
		font-weight: bold;
		font-size: 36rpx;
		height: 35px;
		line-height: 35px;
	}

	.lucky-swiper {
		width: 100%;
		height: 260rpx;
		float: left;
		overflow: hidden;
		position: relative;
	}

	.lucky-position {
		width: 100%;
		float: left;
		position: absolute;
	}

	.lucky-for {
		width: 100%;
		float: left;
		height: 30px;
		line-height: 30px;
	}

	.lucky-for>view {
		width: 24%;
		float: left;
		font-size: 24rpx;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.lucky-for>view:nth-child(2) {
		text-align: center;
	}

	.shouYiJiE {
		height: 33rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 33rpx;
		color: #3975EA;
		margin: 32rpx 0 16rpx;
	}

	.tuiJian-content {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
	}

	.rowLine {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* background-color: red; */
	}

	.xinde {
		background-color: #fcc44c;
	}

	.jiande {
		background-color: #ff6600;
	}

	.hot {
		background-color: #fe6946;
	}

	.bao {
		background-color: red;
	}
</style>